import React, { Component } from "react";
import "./Shop.scss";
import { index_banner, index_nav, index_goodlist } from "../utils/api";
import { Swiper } from "antd-mobile";
import img1 from "../../image/1.gif";
import img2 from "../../image/2.gif";
export default class Shop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lunboArr: [],
      listArr: [],
      tjlistArr: []
    };
  }
  componentDidMount() {
    index_banner().then((res) => {
      this.setState((this.state.lunboArr = res.data.list));
    });
    index_nav().then((res) => {
      this.setState((this.state.listArr = res.data.list));
    });
    index_goodlist({page:1,count:18}).then((res) => {
      this.setState((this.state.tjlistArr = res.data.list));
    });
  }
  inputKeydown=(e)=>{
      if(e.keyCode ===13){
        this.props.history.push({ pathname:'/index/Serch' })
      }
  }
  render() {
    return (
      <div className="shop">
        <div className="head">
          <div className="headtop">
            <div className="tpleft">
              <span className="s1">cdf 会员购</span>
              <span className="s2">足不出户 尊享全球奢品</span>
            </div>
            <div className="tpright">
              <div className="smbox">
                <span className="iconfont icon-dian"></span>
                <span className="iconfont icon-icon-yuanxk"></span>
              </div>
            </div>
          </div>
          <div className="headbtm">
            <div className="ipt">
              <input type="text" onKeyDown={this.inputKeydown} placeholder="搜索商品" />
              <span className="iconfont icon-sousuo"></span>
            </div>
            <div className="kf">
              <span className="iconfont icon-kefu"></span>
              <span>客服</span>
            </div>
          </div>
        </div>
        <div className="main">
          <Swiper loop autoplay className="banner">
            {this.state.lunboArr.map((item, index) => {
              return (
                <Swiper.Item key={index}>
                  <img src={item.pic} alt="" />
                </Swiper.Item>
              );
            })}
          </Swiper>

          <div className="list">
            {this.state.listArr.map((item, index) => {
              return (
                <div className="cate" key={index}>
                  <img src={item.pic} alt="" />
                  <span>{item.name}</span>
                </div>
              );
            })}
          </div>
          <div className="quick">
            <img src={img1} alt="" />
          </div>
          <div className="time">
            <img src={img2} alt="" />
          </div>

          <div className="tjlist">
            {this.state.tjlistArr.map((item, index) => {
              return (
                <div className="tjzibox" key={index}>
                  <div className="tjtu">
                    <img src={item.pic} alt="" />
                  </div>
                  <p>{item.name}</p>
                  <span>抢购价￥<b>{item.salesPrice.value}</b></span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    );
  }
}
